<template>
  <div style="padding: 15px 30px">
    <div class="padding-top-bottom-20">
      <form-common :filed-list="contractList" ref="form1"></form-common>
      <div class="align-center">
        <span class="font-size-16" style="width: 140px">验收单</span>
        <span v-if="acceptanceName != '暂无'" class="font-size-16 cursor-pointer color-primary" type="primary" :underline="false" @click="acceptOrder">{{ acceptanceName }}</span>
        <span v-else>{{ acceptanceName }}</span>
      </div>
      <div style="" class="padding-top-15">
        <span class="font-size-16" style="padding-right:103px;">附件</span>
        <template v-if="attachmentList && attachmentList.length > 0">
          <a class="file-box font-size-16 padding-bottom-30 cursor-pointer color-primary" v-for="(item, index) in attachmentList" :key="index" @click="uploadLoad(item.fileUrl)">
            {{ item.fileTitle }}
          </a>
        </template>
        <span class="padding-bottom-30" v-else>暂无附件 ！</span>
      </div>
    </div>

    <approve-info></approve-info>

    <el-dialog title="验收单" :visible.sync="dialogShow" width="65%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-descriptions :column="2" class="border-bottom-F2F2F2 margin-bottom-10">
        <el-descriptions-item label="项目名称">{{ model.projectName }}</el-descriptions-item>
        <el-descriptions-item label="事项类型">{{ model.matterTypeName }}</el-descriptions-item>
        <el-descriptions-item label="事项名称">{{ model.matterNameValue }}</el-descriptions-item>
        <el-descriptions-item label="验收结果">{{ model.acceptanceResultName }}</el-descriptions-item>
        <el-descriptions-item label="处理方">{{ model.handleParty }}</el-descriptions-item>
        <el-descriptions-item label="处理人">{{ model.handlePerson }}</el-descriptions-item>
        <el-descriptions-item label="公司名称">{{ model.companyName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ model.phone }}</el-descriptions-item>
        <el-descriptions-item label="处理时间">{{ model.handleTime | formatDateTime('YYYY-MM-DD') }}</el-descriptions-item>
        <el-descriptions-item label="验收人">{{ model.acceptancePerson }}</el-descriptions-item>
        <el-descriptions-item label="验收时间">{{ model.acceptanceTime | formatDateTime('YYYY-MM-DD') }}</el-descriptions-item>
        <el-descriptions-item label="验收说明">{{ model.acceptanceExplain }}</el-descriptions-item>
      </el-descriptions>
      <div class="padding-bottom-20 full-box">
        <div v-for="(item, index) in model.attachmentList" :key="index" class="f-left margin-right-15">
          <el-image style="width: 100px; height: 100px" :src="item.fileUrl" fit="fit"></el-image>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import * as Form from './form.js';
  import formCommon from '@g/components/form/formCommon.vue';
  import approveInfo from './approveInfo.vue';
  import { apiPayInfo, apiCheckBillInfo } from '../../api/contract';

  export default {
    data() {
      return {
        attachmentList: [],
        contractList: Form.contract,
        dialogShow: false,
        acceptanceName: '',
        acceptanceKey: '',
        model: {},
        srcList: [],
      };
    },
    mounted() {
      this.getBillInfo();
    },
    methods: {
      //详情
      async getBillInfo() {
        this.$refs.form1.initModel();
        let res = await apiPayInfo({
          primaryKey: this.$route.query.infoKey,
        });
        res.unpaidAmount = res.unpaidAmount ? res.unpaidAmount + '元' : '暂无';
        res.applyAmount = res.applyAmount ? res.applyAmount + '元' : '暂无';
        res.fundsDesc = res.fundsDesc ? res.fundsDesc : '暂无';
        this.acceptanceName = res.acceptanceName || '暂无';
        this.acceptanceKey = res.acceptanceKey;
        this.attachmentList = res.attachmentList;
        for (let i in res) {
          this.contractList.forEach(item => {
            if (item.bindFieldName == i) {
              item.bindFieldVal = res[i];
            }
          });
        }
      },
      async acceptOrder(item) {
        let res = await apiCheckBillInfo({ primaryKey: this.acceptanceKey });
        res.acceptanceResultName = res.acceptanceResult == 1 ? '合格' : '不合格';
        this.model = res;
        this.dialogShow = true;
      },
      //下载
      uploadLoad(url) {
        let a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      },
    },
    components: { formCommon, approveInfo },
  };
</script>
<style scoped lang="scss">
  .color-primary {
    color: #409EFF !important;
  }

  .flex-box {
    height: 50px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;

    justify-content: space-between;
    .large-title {
      font-size: 18px;
    }
  }
  .form-common {
    margin-left: -10px;
  }
</style>
